<template>
  <div class="example-index-header">
    <div class="header-bg">
      <div class="header-title"></div>
    </div>
    <ExampleIndexButton class="header-btn" button-text="管理" @click="handleClick" />
  </div>
</template>

<script lang="ts" setup>
import ExampleIndexButton from './example-index-button.vue';

defineOptions({
  name: 'ExampleIndexHeader'
});

const emits = defineEmits(['manage']);

const handleClick = () => {
  emits('manage');
};
</script>

<style lang="scss" scoped>
.example-index-header {
  position: relative;
  width: 100%;
  height: 100px;

  .header-bg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-image: url('../images/header-bg.svg');
    background-position: center center;

    .header-title {
      width: 540px;
      height: 60px;
      background-image: url('../images/header-title.svg');
      background-position: center center;
    }
  }

  .header-btn {
    position: absolute;
    top: 10px;
    right: 40px;
  }
}
</style>
